<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医院系统主页</title>

    <style>
        /* 导航栏样式 */
        .navbar {
            background-color: #ffffff; /* 设置导航栏背景色 */
            color: #007bff; /* 设置导航栏文字颜色 */
            padding: 15px 0; /* 设置导航栏上下内边距 */
            text-align: center; /* 文字居中 */
            border-radius: 15px; /* 设置导航栏边框圆角 */
        }

        .navbar ul {
            list-style-type: none; /* 去掉列表样式 */
            padding: 0;
        }

        .navbar li {
            display: inline-block; /* 横向排列 */
            margin: 0 20px; /* 设置列表项之间的水平间距 */
        }

        .navbar a {
            color: #007bff; /* 设置链接文字颜色 */
            text-decoration: none; /* 去掉下划线 */
            font-size: 28px; /* 设置导航栏字体大小 */
        }


        /* 轮播图样式 */
        .carousel {
            align-content: center;
            display: flex;
            /*overflow: hidden;*/
            /*position: relative;*/
        }

        .carousel-container {
            display: flex;
            transition: transform 0.5s ease;
        }

        .carousel-item {
            flex: 0 0 auto;
            width: 100%;
        }

        .carousel-button {
            position: absolute;
            top: 50%;
            /*transform: translateY(-50%);*/
            cursor: pointer;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            border: none;
            outline: none;
        }

        /*.prev {*/
        /*    left: 0;*/
        /*    background-color: transparent;*/
        /*}*/

        /*.next {*/
        /*    right: 0;*/
        /*    background-color: transparent;*/
        /*}*/

        /* 页脚样式 */
        .footer {
            background-color: #ffffff; /* 设置页脚背景色为白色 */
            text-align: center; /* 文字居中对齐 */
            padding: 20px 0; /* 设置页脚上下内边距 */
        }

        /* 页脚内容样式 */
        .footer-content {
            font-size: 30px;
            font-weight: bold; /* 设置文字加粗 */
            margin-bottom: 30px; /* 设置段落之间的下边距 */
        }

        /* 预约服务按钮样式 */
        .appointment-button {
            display: block; /* 将按钮转换为块级元素 */
            margin: 20px auto 10px; /* 上边距为20px，下边距为10px，水平居中 */
            padding: 15px 30px; /* 设置按钮内边距 */
            border-radius: 30px; /* 设置按钮圆角 */
            background-color: #007bff; /* 设置背景色为蓝色 */
            color: #ffffff; /* 设置文字颜色为白色 */
            font-size: 18px; /* 设置字体大小 */
            font-weight: bold; /* 设置字体加粗 */
            border: none; /* 移除边框 */
            cursor: pointer; /* 设置鼠标指针样式为手型 */
            transition: background-color 0.3s; /* 添加背景色过渡效果 */
            width: 100px;
        }

        .appointment-button:hover {
            background-color: #0056b3; /* 悬停时背景色变暗 */
        }

    </style>
</head>
<body>
<div id="app">
    <div class="navbar">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="Department.html">科室导航</a></li>
            <li><a href="DoctorTeam.html">专家团队</a></li>
            <!--            <li><a href="Appointment.html">预约挂号</a></li>-->
            <!--            <li><a href="UserAccount.html">个人中心</a></li>-->
            <li><a href="ContactUs.html">联系我们</a></li>
        </ul>
    </div>

    <div class="carousel">
        <div class="carousel-container" :style="{ transform: 'translateX(' + offset + ')' }">
            <div class="carousel-item" v-for="(image, index) in images" :key="index">
                <img :src="image.src" :alt="'Image ' + (index + 1)">
            </div>
        </div>
        <button class="carousel-button prev" @click="moveSlide(-1)">Prev</button>
        <button class="carousel-button next" @click="moveSlide(1)">Next</button>
    </div>
</div>

<!--<footer class="footer">-->
<!--    <div class="footer-content">-->
<!--        <p>点击预约服务，我们会尽快为您安排</p>-->
<!--    </div>-->
<!--    <a href="http://localhost:5173/user" class="appointment-button">登录/注册</a>-->
<!--</footer>-->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            currentIndex: 0,
            images: [
                {src: '../../img/lunbo2.png'},
                {src: '../../img/lunbo3.jpg'},
            ]
        },
        computed: {
            totalItems() {
                return this.images.length;
            },
            offset() {
                return -this.currentIndex * 100 + '%';
            }
        },
        methods: {
            moveSlide(direction) {
                this.currentIndex = (this.currentIndex + direction + this.totalItems) % this.totalItems;
            },
            redirectToAppointment() {
                // 请确认 Appointment.html 文件位于相同目录下，或者根据实际情况修改路径
                window.location.href = "Appointment.html"; // 这里替换成你的预约页面URL
            }
        },


    });
</script>
</body>
</html>
